<template>
	<div>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>菜单权限</span>
			</div>
			<el-alert title="
Tips" type="warning" :closable="false" class="tips" description="设置后台管理系统的左侧菜单，目前至多支持两层菜单，三层以上菜单将不会显示。" show-icon>
			</el-alert>
			<!-- <el-tree :data="data" :props="defaultProps"></el-tree> -->
			<el-tree :props="defaultProps" ref="tree" lazy :load="loadNode" node-key="id" :default-expanded-keys="[1]">
				<div class="custom-tree-node" slot-scope="{ node, data }">
					<div>{{ node.label }}</div>
					<div class="operate" @click.stop="openIconDialog(node,data)">
						<el-popover placement="left" width="150" trigger="hover">
							<i :class="'el-icon-' + data.icon" style="font-size: 30px;"></i>
							<el-button slot="reference" type="text" size="mini" :icon="'el-icon-' + data.icon">
								图标
							</el-button>
						</el-popover>
						<el-button type="text" :disabled="data.id === 0" size="mini" icon="el-icon-edit"
							@click.stop="openEditDialog(node,data)">
							编辑
						</el-button>
						<el-button type="text" size="mini" @click.stop="openAddDialog(node,data)"
							icon="el-icon-circle-plus-outline">
							添加
						</el-button>
						<el-button type="text" size="mini" :disabled="data.id === 0"
							@click.stop="handleRemove(node,data)" icon="el-icon-delete">
							删除
						</el-button>
						<span class="showNum">显示序号:</span>
						<el-tag>{{ data.order }}</el-tag>
					</div>
				</div>


			</el-tree>
		</el-card>
		<!-- 添加分类 -->
		<el-dialog title="添加节点" :visible.sync="addDialogVisible" @close='handleDialogClose("addForm")'>
			<el-form :model="addForm" label-width="80px" ref="addForm" :rules='rules'>
				<el-form-item label="菜单名称" prop='name'>
					<el-input v-model="addForm.name"></el-input>
				</el-form-item>
				<el-form-item label="组件名称" prop='component'>
					<el-input v-model="addForm.component" placeholder="指定此菜单对应的组件名称"></el-input>
				</el-form-item>
				<el-form-item label="链接地址" prop='path'>
					<el-input v-model="addForm.path" placeholder="指定此菜单对应的组件名称"></el-input>
				</el-form-item>
				<el-form-item label="显示顺序" prop='order'>
					<el-input v-model="addForm.order"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer">
				<el-button @click="addDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleAdd">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 编辑节点 -->
		<el-dialog title="编辑节点" :visible.sync="editDialogVisible" @close='handleDialogClose("editForm")'>
			<el-form :model="editForm" label-width="80px" ref="editForm" :rules='rules'>
				<el-form-item label="菜单名称" prop='name'>
					<el-input v-model="editForm.name"></el-input>
				</el-form-item>
				<el-form-item label="组件名称" prop='component'>
					<el-input v-model="editForm.component" placeholder="指定此菜单对应的组件名称"></el-input>
				</el-form-item>
				<el-form-item label="链接地址" prop='path'>
					<el-input v-model="editForm.path" placeholder="指定此菜单对应的组件名称"></el-input>
				</el-form-item>
				<el-form-item label="显示顺序" prop='order'>
					<el-input v-model="editForm.order"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer">
				<el-button @click="editDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleEdit">保 存</el-button>
			</div>
		</el-dialog>
		<!-- 选择图标 -->
		<el-dialog title="选择图标" :visible.sync="iconDialogVisible" width="1100px">
			<ul class="icon-all">
				<li v-for="(item,index) in iconData" class="icon-single" :class="{active:index==isActive}"
					@click="SelectIcon(item,index)">
					<i :class="'el-icon-' + item.name" style="font-size: 26px;"></i>
					<span>{{'el-icon-' +item.name}}</span>
				</li>
			</ul>
			<el-pagination @current-change="handleCurrentChange" :page-size="30" background class="page"
				layout=" prev, pager, next" :total='300'>
			</el-pagination>
			<div slot="footer">
				<el-button @click="iconDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleIconEdit">保 存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { Auth } from '@/api/';

	export default {
		data() {
			return {
				data: [],
				isActive: -1,
				addForm: {
					name: '',
					pId: '',
					order: '',
					path: '',
					component: '',
				},
				iconForm: {
					pageSize: 30,
					pageIndex: 1,
				},
				iconname: '',
				iconData: [],
				addDialogVisible: false,
				node: {}, //当前操作节点的node对象
				tableData: [],
				defaultProps: {
					label: 'name',

				},
				editIconForm: {
					id: '',
					icon: '',
				},
				editForm: {
					name: '',
					pId: '',
					order: '',
					path: '',
					component: '',
				},
				editDialogVisible: false,
				iconDialogVisible: false,
				rules: {
					name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
					component: [{ required: true, message: '请输入组件名称', trigger: 'blur' }],
					path: [{ required: true, message: '请输入url地址', trigger: 'blur' }],
					order: [{ required: true, message: '请输入序号', trigger: 'blur' }]
				}


			};

		},
		created() {
			this.loadIconAll();
		},
		methods: {

			handleAdd() {
				this.$refs.addForm.validate(async (valid) => {
					if (valid) {
						let { status, msg, data } = await Auth.add({ ...this.addForm });
						if (status) {
							this.$message.success(msg);
							//插入子节点
							this.$refs.tree.append({ ...this.addForm, ...data }, this.node);
							this.addDialogVisible = false;
							this.addForm = {
								name: '',
								pId: '',
							}
						} else {
							this.$message.error(msg);
						}
					}

				})
			},

			handleDialogClose(form) {
				this.$refs. [form].clearValidate();
			},
			openAddDialog(node, data) {
				//缓存父级node
				this.node = node;
				//父级id
				this.addForm.pId = data.id;

				this.addDialogVisible = true;
			},
			openEditDialog(node, data) {
				//还原表单
				this.node = node;
				console.log(data)
				this.editForm = { ...data };

				this.editDialogVisible = true;
			},
			openIconDialog(node, data) {
				//还原表单
				this.node = node;
				this.editIconForm.id = node.id;
				// this.editForm = { ...data };

				this.iconDialogVisible = true;
			},
			handleEdit() {
				this.$refs.editForm.validate(async (valid) => {
					if (valid) {
						let { status, msg, data } = await Auth.edit({ ...this.editForm });
						if (status) {
							this.$message.success(msg);
							//更新节点
							this.node.data = this.editForm;

							//关闭弹窗户
							this.editDialogVisible = false;
						} else {
							this.$message.error(msg);
						}
					}

				})
			},
			async handleIconEdit() {
				let { status, msg } = await Auth.iconset({ ...this.editIconForm });
				if (status) {
					this.$message.success(msg);
					this.node.data.icon = this.iconname;
					//关闭弹窗户
					this.iconDialogVisible = false;
				} else {
					this.$message.error(msg);
				}
			},
			handleRemove(node, data) {
				let { id } = data;
				this.$confirm('此操作将永久删除用户，是否继续', { type: 'warning' })
					.then(async () => {
						let { status, msg } = await Auth.cancel({ id })
						if (status) {
							//删除节点
							this.$refs.tree.remove(node);
							this.$message.success(msg);
						} else {
							this.$message.error(msg);
						}
					})
					.catch(() => {
						this.$message.info('取消成功')
					})
			},
			//(节点对象,生成新节点的函数)
			async loadNode(node, resolve) {


				if (node.level === 0) {
					return resolve([{ id: 1, name: '全部分类', order: 0 }]);
				}
				//获取父级分类的id
				let { id } = node.data
				let { status, data } = await Auth.subcate({ pId: id });

				if (status) {
					resolve(data);
				}

			},
			async loadIconAll() {
				let { status, icons, total } = await Auth.iconall({ ...this.iconForm });
				if (status) {
					this.iconData = icons;
				}
			},
			handleCurrentChange(val) {
				this.iconForm.pageIndex = val
				console.log(`当前页: ${val}`);
				this.loadIconAll();
			},
			SelectIcon(item, index) {
				this.isActive = index;
				this.editIconForm.icon = item.id;
				this.iconname = item.name
				console.log(this.editIconForm.icon)
			}
		},
	}
</script>

<style lang="less" scoped>
	* {
		list-style: none;
	}

	.custom-tree-node {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		padding-right: 8px;
	}

	.showNum {
		font-size: 12px;
		margin-right: 3px;
	}

	.tips {
		margin-bottom: 20px;
	}

	.icon-all {
		display: flex;
		flex-wrap: wrap;
		padding-left: 0;
	}

	.icon-single {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(10% - 8px);
		padding: 16px 3px;
		border: 1px solid #eee;

		transition: all 0.5s;

		// border-spacing: 0;
		// border-collapse: collapse;
		&:hover,
		&:hover span {
			color: #5cb6ff;
		}

		span {
			font-size: 12px;
			color: #99a9bf;
			text-align: center;
			padding-top: 10px;

		}
	}

	.active {
		color: #fff !important;
		background-color: #5cb6ff;

		&:hover,
		&:hover span {
			color: #fff;
		}

		span {
			color: #fff;
		}
	}

	.page {

		display: flex;
		justify-content: flex-end;
	}
</style>
